<template>
  <div class="spotmall_filter">
    <ul>
      <li class="flex">
        <div class="label tr no-select">分类：</div>
        <div class="content">
          <template v-for="tag in classifyTags">
            <a-checkable-tag
              :key="tag.id"
              :checked="selectedClassifyTags.indexOf(tag.id) > -1"
              @change="
                checked =>
                  classifyTagsChange(tag, checked, 'selectedClassifyTags', 'id')
              "
            >
              <span class="cursor-pointer no-select"
                >{{ tag.categoryName }}
              </span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
      <!-- <li class="flex">
        <filter-item :data="radioData" />
        <div class="suffix">
          <c-button type="link">重置</c-button>
          <span>
            <c-button type="link" @click="changeSwitch"
              >{{ filterSwitch ? "收起" : "展开" }}
              <c-icon
                type="xia"
                class="inline-b primary"
                :class="[filterSwitch ? 'open' : '']"
            /></c-button>
          </span>
        </div>
      </li>
      <c-collapse>
        <li class="flex" v-show="filterSwitch">
          <filter-item :data="multipleData" />
          <div class="suffix">
            <span style="paddingLeft: 15px;">多选项</span>
          </div>
        </li>
      </c-collapse> -->
      <li class="flex">
        <div class="label tr no-select">热门品种：</div>
        <div class="content">
          <template v-for="tag in hotClassifyTags">
            <a-checkable-tag
              :key="tag.id"
              :checked="selectedHotClassifyTags.indexOf(tag.id) > -1"
              @change="
                checked =>
                  hotClassifyTagsChange(
                    tag,
                    checked,
                    'selectedHotClassifyTags',
                    'id'
                  )
              "
            >
              <span class="cursor-pointer no-select"
                >{{ tag.categoryName }}
              </span>
            </a-checkable-tag>
          </template>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import areas from "@/components/areas";
// import collapse from "@/util/transition/collapse";

const radioData = [
  {
    label: "品种",
    type: "category"
  },
  {
    label: "来源",
    data: [
      {
        label: "全部",
        value: "0"
      },
      {
        label: "供应商报价",
        value: "1"
      },
      {
        label: "非供应商报价",
        value: "2"
      }
    ],
    type: "select",
    defaultValue: "0"
  },
  {
    label: "状态",
    data: [
      {
        label: "全部",
        value: "0"
      },
      {
        label: "在售中",
        value: "1"
      },
      {
        label: "已售完",
        value: "2"
      }
    ],
    type: "select",
    defaultValue: "0"
  },
  {
    label: "地区",
    type: "area"
  }
];
const multipleData = [
  {
    label: "品牌",
    data: [],
    type: "select",
    placeholder: "不限",
    multiple: true
  },
  {
    label: "规格",
    data: [],
    type: "select",
    placeholder: "不限",
    multiple: true
  },
  {
    label: "材质",
    data: [],
    type: "select",
    placeholder: "不限",
    multiple: true
  },
  {
    label: "仓库",
    data: [],
    type: "select",
    placeholder: "不限",
    multiple: true
  }
];

export default {
  // components: {
  //   // cCollapse: collapse,
  //   // cAreas: areas,
  //   "filter-item": {
  //     template: `<div class="flex flex-align-c"><template v-for="item in data">
  //           <div class="label tr no-select" style="width: 70px;">{{item.label}}：</div>
  //           <div class="content" style="paddingLeft: 15px;">
  //             <c-category v-if="item.type === 'category'" placeholder="不限"></c-category>
  //             <c-areas type="select" v-if="item.type === 'area'" placeholder="不限"></c-areas>
  //             <a-select :mode="item.multiple?'multiple':'default'" v-else-if="item.type === 'select'" :placeholder="item.placeholder || '请选择' + item.label" style="width: 184px;">
  //               <a-select-option v-for="item in item.data" :value="item.value" :key="item.value">
  //                 {{item.label}}
  //               </a-select-option>
  //             </a-select>
  //           </div>
  //         </template></div>`,
  //     props: {
  //       data: {
  //         type: Array,
  //         default: () => {
  //           return [];
  //         }
  //       }
  //     },
  //     components: {
  //       cAreas: areas
  //     }
  //   }
  // },
  data() {
    return {
      selectedClassifyTags: [0],
      selectedHotClassifyTags: [],
      radioData,
      multipleData,
      filterSwitch: false
    };
  },
  computed: {
    ...mapState(["resource", "search"]),
    // 获取所有分类
    classifyTags() {
      let res = JSON.parse(JSON.stringify(this.resource.categoryRootMenu));
      res.unshift({
        categoryName: "全部",
        id: 0
      });
      return res;
    },
    // 热门品种
    hotClassifyTags() {
      let categoryNames = [
        "铜线坯",
        "热轧卷板",
        "螺纹钢",
        "盘螺",
        "铝锭",
        "锌锭",
        "电解铜"
      ];
      let res = [];
      categoryNames.forEach(item => {
        let arr = this.resource.categoryList.filter(
          i => i.categoryName === item
        );
        res = res.concat(arr);
      });
      return res;
    },
    categoryStatus() {
      return this.search.categoryStatus;
    }
  },
  watch: {
    categoryStatus() {
      this.selectedClassifyTags = [0];
    }
  },
  methods: {
    classifyTagsChange(tag, checked, selectedTags, val) {
      this.selectedHotClassifyTags = [];
      this[selectedTags] = [tag[val]];
      // this.$emit("changeClass", [tag[val]]);
      this.$emit("change", {
        class: [tag[val]],
        hotcategory: this.selectedHotClassifyTags
      });
    },
    hotClassifyTagsChange(tag, checked, selectedTags, val) {
      this.selectedClassifyTags = [0];
      if (checked) {
        this[selectedTags] = [tag[val]];
      } else {
        this[selectedTags] = [];
      }
      // this.$emit("changeHotClassify", this[selectedTags]);
      this.$emit("change", {
        class: this.selectedClassifyTags,
        hotcategory: this[selectedTags]
      });
    },
    changeSwitch() {
      this.filterSwitch = !this.filterSwitch;
    }
  }
};
</script>

<style lang="scss" scoped>
.spotmall_filter {
  background-color: #fff;
  padding: 20px;
  margin: 20px 0;
  border-radius: 4px;
  ul {
    li {
      .label {
        width: 70px;
      }
      .content {
        padding-left: 15px;
      }
      .suffix {
        padding-left: 70px;
        line-height: 32px;
      }
    }
    li:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  ::v-deep .ant-tag {
    font-size: 14px;
  }
  .open {
    transform: rotate(180deg);
  }
  .icon-xia {
    transition: transform 0.2s;
  }
}
</style>
